<!--
 * @Description: 减脂营编辑按钮
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-05-12 11:25:18
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-03 22:12:41
 -->
<template>
  <div>
    <el-table :data="tableData" border fit highlight-current-row>
      <el-table-column type="expand" >
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="序号：">
              <span>{{ props.row.number }}</span>
            </el-form-item>
            <el-form-item label="微信昵称：">
              <span>{{ props.row.nick_name }}</span>
            </el-form-item>
            <el-form-item label="用户名：">
              <span>{{ props.row.user_name }}</span>
            </el-form-item>
            <el-form-item label="健康值：">
              <span>{{ props.row.health_value }}</span>
            </el-form-item>
            <el-form-item label="活跃天数：">
              <span>{{ props.row.active_day }}</span>
            </el-form-item>
            <el-form-item label="减重：">
              <span>{{ props.row.weight_lost }}</span>
            </el-form-item>
            <el-form-item label="负责人：">
              <span>{{ props.row.principal }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="编号" prop="id" width="100"></el-table-column>
      <el-table-column label="序号" prop="number"></el-table-column>
      <el-table-column label="微信昵称" prop="nick_name"></el-table-column>
      <el-table-column label="用户名" prop="user_name"></el-table-column>
      <el-table-column label="健康值" prop="health_value"></el-table-column>
      <!-- <el-table-column label="打卡评级" prop="system_desc">
        <template slot-scope="scope">
          <div class="color-block" v-bind:style="{backgroundColor:cacelSysParam(scope.row.punch_desc)}"></div>
        </template>                 
      </el-table-column> -->
      <!-- <el-table-column label="人工评级" prop="grade_desc">
        <template slot-scope="scope">
          <div class="color-block" v-bind:style="{backgroundColor:cacelparam(scope.row.grade_desc)}"></div>
        </template>                
      </el-table-column> -->
      <el-table-column label="人工等级" prop="grade_desc"></el-table-column>              
      <el-table-column label="活跃天数" prop="active_day"></el-table-column>
      <el-table-column label="复购信息" prop="repurchase_product"></el-table-column>
      <el-table-column label="减重" prop="weight_lost"></el-table-column>
      <!-- <el-table-column label="负责人" prop="principal"></el-table-column> -->
      <el-table-column label="当天打卡状态">
        <template slot-scope="scope">
          <i :class="scope.row.punch_status && +scope.row.punch_status.weight === 1 ? 'card-color' : 'info'" class="i-icon icon-lamp" title="体重"></i>
          <i :class="scope.row.punch_status && +scope.row.punch_status.breakfast === 1 ? 'card-color' : 'info'" class="i-icon icon-lamp" title="早餐"></i>
          <i :class="scope.row.punch_status && +scope.row.punch_status.lunch === 1 ? 'card-color' : 'info'" class="i-icon icon-lamp" title="午餐"></i>
          <i :class="scope.row.punch_status && +scope.row.punch_status.supper === 1 ? 'card-color' : 'info'" class="i-icon icon-lamp" title="晚餐"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作" class="txtCenter">
        <template slot-scope="scope">
          <i class="i-icon icon-check" title="查看" @click="serviceDetail(scope.row.id)"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="query.page"
      :page-size="query.limit"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleChange" />
  </div>
</template>
<script>

export default {
  data() {
    return {
      query: {
        camp_id: '',
        page: 1,
        limit: 20
      },
      total: 0,
      loadingUser: true,
      tableData: [],
      secondChannels: []
    }
  },
  methods: {
    initData(campId) {
      this.query.camp_id = campId
      this.$api.order.camp
        .getServiceList({
          params: this.query
        })
        .then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        }).catch(err => {
          console.log(err)
        })
    },
    serviceDetail(id) {
      this.$router.push('/order/serviceDetail/' + id + '?tab=punch')
    },
    initParams() {
      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    handleChange() {
      
    },
    cacelSysParam (param) {
      console.log(param)
      return ''
      let arr = param.split('_')
      let num = Number(arr[0]) * 80 + Number(arr[1]) * 20
      let str = ''
      if (num >= 80) {
        str = '#2df988'
      } else if (num <= 20) {
        str = '#8391a5'
      } else {
        str = '#ecef55'
      }
      return str
    },
    cacelparam (params) {
      console.log(params)
      return ''
      var str = params
      if (params === '') {
        str = '#fff'
      } else {
        var arr = str.split('+')
        var num = 0
        arr.forEach(item => {
          if (item.indexOf('A') !== -1) {
            num += item.substring(0, 1) * 1
          } else if (item.indexOf('B') !== -1) {
            num += item.substring(0, 1) * 0.5
          } else if (item.indexOf('C') !== -1) {
            num += item.substring(0, 1) * 0
          } else if (item.indexOf('D') !== -1) {
            num += item.substring(0, 1) * (-0.5)
          }
        })
        if (num >= 1) {
          str = '#2df988'
        } else if (num < 0) {
          str = '#8391a5'
        } else {
          str = '#ecef55'
        }
      }
      return str
    }
  }
}
</script>

<style scoped>
  div{
    display: inline-block;
    margin-right: 3px;
  }
</style>
